<template>
    <v-container class="fill-height d-flex align-center justify-center">
        <v-card class="pa-8" max-width="420" elevation="10">
            <v-card-title class="text-h5 font-weight-bold mb-4">Modify/Reset password</v-card-title>
            <v-form @submit.prevent="onSubmit" v-model="valid">
                <v-text-field v-model="form.password" label="New password" type="password"
                    :rules="[(v: string) => !!v || 'Please enter the new password', (v: string) => v.length >= 8 || 'Password must be at least 8 digits', (v: string) => /[a-z]/.test(v) || 'Password must contain at least one lowercase letter', (v: string) => /[A-Z]/.test(v) || 'Password must contain at least one uppercase letter', (v: string) => /[0-9]/.test(v) || 'Password must contain at least one number']"
                    prepend-inner-icon="mdi-lock" class="mb-4" />
                <v-text-field v-model="form.confirmPassword" label="Confirm new password" type="password"
                    :rules="[(v: string) => v === form.password || 'The two passwords are inconsistent']"
                    prepend-inner-icon="mdi-lock-check" class="mb-4" />
                <v-btn color="primary" type="submit" block :loading="loading">Submit</v-btn>
            </v-form>
        </v-card>
    </v-container>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { message } from '@/utils/message';
// import { sendResetCode, doResetPassword } from '@/api/auth'; // 需实现

const valid = ref(true);
const loading = ref(false);
const codeSending = ref(false);
const countdown = ref(60);
const timer = ref<number | null>(null);

const form = reactive({
    account: '',
    code: '',
    password: '',
    confirmPassword: ''
});

function sendCode() {
    if (!form.account) {
        message.error('请输入邮箱或手机号');
        return;
    }
    codeSending.value = true;
    countdown.value = 60;
    timer.value = window.setInterval(() => {
        countdown.value--;
        if (countdown.value <= 0) {
            codeSending.value = false;
            clearInterval(timer.value!);
        }
    }, 1000);
    // sendResetCode(form.account)
    message.success('验证码已发送（模拟）');
}

async function onSubmit() {
    if (!valid.value) return;
    loading.value = true;
    try {
        // await doResetPassword(form)
        message.success('密码重置成功（模拟）');
    } catch (e) {
        message.error('重置失败');
    }
    loading.value = false;
}
</script>